<template>
	
	<!-- 父容器 -->
	<div class="container-full" id="container-full">

		<!-- 顶部 -->
		<div class="head">

			<div id="title">
				<h2>{{title}}</h2>
			</div>

			<!-- 搜索框 -->
			<div class="search">
				<input type="text" style="outline: 7px;height: 35px;padding: 10px;" placeholder="HTML 教程" size="30">
			</div>
		</div>

		<!-- 容器 -->
		<div class="container">

			<!-- 顶部导航栏 -->
			<div class="topnav">
				<ul>
					<li v-for="item in items">
						<a href="#">{{item}}</a>
					</li>

				</ul>
			</div>

			<!-- 容器2-->
			<div class="container_2">

				<!-- 左侧栏 -->
				<div class="sidebar-left">

					<div class="title-bar">
						{{leftTitle}}
					</div>

					<div id="left-list">
						<ul>
							<li v-for="item1 in items1">
								{{item1}}
							</li>
						</ul>
					</div>
				</div>

				<div class="main">

					<!-- 学号 姓名 -->
					<div class="row" style="width: 100%;background-color: rgb(243, 243, 243);">

						<div class="col-md-12" style="height: 80px;padding-left: 30px;">
							<div class="row">
								<div class="col-md-2"
									style="position: relative;top: 5px;font-size: 1.8em;font-weight: 600;color: #434343">
									{{uid}}
								</div>
							</div>
							<div class="row">
								<div class="col-md-4"
									style="position: relative;top: 3px;font-size: 2em;font-weight: 600;color: #434343">
									{{name}}
								</div>
							</div>
						</div>

					</div>

					<hr>

					<!-- 模块1 ifram窗口 -->
					<div class="page_1">
						<iframe src="https://www.runoob.com/" loading="lazy" frameborder="0" width="100%"
							height="100%"></iframe>
					</div>

					<hr>

					<!-- 模块2 -->
					<div class="page_2">
						<div class="card-1">
							<p>Iframe语法：</p>
							<div class="code">
								<!-- 显示代码语句 -->
								<xmp><iframe src="URL"></iframe></xmp>
							</div>
							<p style="margin-top: 7px;">该URL指向不同的网页。</p>
						</div>

						<hr>

						<div class="card-2">
							<ul>
								<li>
									<h3>iframe - 设置高度与宽度</h3>
								</li>
								<li>
									<p>height 和 width 属性用来定义iframe标签的高度与宽度。</p>
								</li>
								<li>
									<p>属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。</p>
								</li>
							</ul>



						</div>
					</div>

				</div>
				<div class="sidebar-right">
					<div class="classify">
						分类导航
					</div>

					<div>
						<ul>
							<li v-for="item2 in items2">
								{{item2}}
							</li>

						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="foot">
			@runoob.com
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		methods: {


		},
		data() {
			return {

				title: 'Runoob.COM',
				items: [
					'HTML',
					'JAVASCRIPT',
					'VUE',
					'BOOTSTRAP',
					'NODE.JS',
					'PYTHON',
					'C',
					'C++',
					'C#',
					'SQL',
					'LINUX',
					'jquery'
				],
				leftTitle: 'HTML 教程',
				items1: [
					'HTML 教程',
					'HTML 简介',
					'HTML 基础',
					'HTML 元素',
					'HTML 属性',
					'HTML 标题',
					'HTML 段落',
					'HTML 文本格式',
					'HTML 链接',
					'HTML 头部',
					'HTML CSS',
					'HTML 图像',
					'HTML 列表',
					'HTML 区块',
					'HTML 布局',
					'HTML 表单',
					'HTML 框架',
					'HTML 颜色值',
					'HTML 颜色名',
					'HTML 框架',
					'HTML 脚本',
					'HTML URL',
					'HTML 速查列表',
					'HTML 标签简写及全称',
					'HTML TML 框架',
					'HTML 颜色',
					'HTML 总结'
				],
				uid: 53,
				name: '杨军洪',
				items2: [
					'HTML/CSS',
					'JavaScript',
					'服务端',
					'数据库',
					'数据分析',
					'移动端',
					'XML 教程',
					'A.SP.NET',
					'Web Service',
					'开发工具',
					'网站搭建'
				]




			}
		}
	}
</script>

<style>
	body {
		background:#F6F6F6;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;

	}

	hr {
		background-color: rgb(117, 117, 117);
		height: 1px;
		border: none;
		margin: 5px 0;
		box-shadow: 10px;
	}

	.head {
		display: flex;
		align-items: center;

	}

	.head h2 {
		font-weight: 600;
		color: black;
		padding: 10px 100px;
		margin-left: 50px;
	}

	.head .search {
		position: relative;
		left: 50%;
	}

	.topnav {
		background: #96B97D;
	}

	.topnav ul {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		/*属性规定弹性项目是否应换行*/
		justify-content: center;
	}

	.topnav ul li {
		margin: 10px 20px;
		font-weight: 550;
		font-size: 1.1em;

	}

	.topnav ul li a {
		text-decoration: none;
		color: #fff;
		letter-spacing: 2px;
		/*字体间的间距*/
	}

	.topnav ul li a:hover {
		color: rgb(112, 153, 240);
	}
	
	.container{
		margin: 0 auto;
	}

	.container_2 {
		display: flex;
		width: 100%;
		margin: 0 0 10px 0;
	}

	.sidebar-left {
		width: 15%;
		height: 850px;
		background: #f3f3f3;
		overflow: hidden;

	}

	.sidebar-left:hover {
		overflow-y: overlay;
	}

	.sidebar-left .title-bar {
		background-color: #EBEBEB;
		font-size: 1.5em;
		font-weight: 600;
		color: rgb(119, 119, 119);
		padding: 7px;
		border-top-left-radius: 10px;
		box-shadow: 10px;
		border: 1px solid #ccc;
	}

	.sidebar-left ul {
		list-style: none;
		padding: 5px;
	}

	.sidebar-left ul li {
		font-size: 15px;
		font-weight: 600;
		color: rgb(99, 99, 99);
		padding: 7px;
		background-color: #F6F4F0;
		border-bottom: 1px solid rgb(230, 230, 230);
	}


	.main {
		border: 1px solid #ccc;
		box-shadow: 10px;
		width: 70%;
		overflow: hidden;
		margin-left: 20px;
		margin-right: 20px;


	}

	.main:hover {
		overflow: overlay;
	}

	.sidebar-right {
		width: 15%;
		height: 460px;

		background-color: #F3F3F3;

	}

	.sidebar-right .classify {
		display: flex;
		justify-content: center;
		background-color: #EBEBEB;
		font-size: 1.5em;
		font-weight: 600;
		color: rgb(119, 119, 119);
		padding: 7px;
		border-top-right-radius: 10px;
		box-shadow: 10px;
		border: 1px solid #ccc;
	}

	.sidebar-right ul {
		list-style: none;
		padding: 5px;
	}

	.sidebar-right ul li {
		font-size: 15px;
		padding: 7px;
		background-color: #F6F4F0;
		border-bottom: 1px solid rgb(230, 230, 230);
	}

	.foot {
		position: relative;
		top: 20px;
		background: #A9AABC;

		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.page_1 {
		width: 98%;
		height: 70%;
		margin: 10px 0;
		background-color: #A9AABC;

	}



	.page_2 {
		width: 98%;
		height: 70%;
		margin: 10px 0;
		background-color: #ffffff;
	}

	.page_2 .card-1 {
		padding: 10px;
	}

	.page_2 .card-1 .code {
		border: 1px solid;
		background-color: rgb(233, 233, 233);
	}




	/*超大屏幕 大桌面显示器  .col-xl-：*/
	@media screen and (min-width: 1400px) {
		.container {
			width: 1400px;
		}
	}

	@media screen and (max-width: 750px) {
		.head {
			display: flex;
			justify-content: center;
		}

		.head h2 {
			font-size: 1.5em;
		}


		.top ul li {
			font-size: 0.5em;

		}

	}
</style>
